<script lang="ts" setup>
import { RouteMap, useRouter } from '@/router';
import { onMounted, reactive, ref } from 'vue';
// @ts-ignore
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
// @ts-ignore
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue';
import { getHelpCategory, getHelpList } from '@/api/user';
import { useAuthStore } from '@/store/auth';
import { useLocale } from '@/locale/locale';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const authStore = useAuthStore();
const router = useRouter();
const statusBarH = ref(0);
const categoryArr = ref<any>({});
const categoryId = ref(0);
const keyword = ref('');
const list = ref<any[]>([]);
const mescrollRef = ref();
const upOption = reactive({
  // 首次自动执行
  auto: false,
  // 数量要大于3条才显示无更多数据
  noMoreSize: 3,
  offset: 10,
  textLoading: '',
  empty: {
    use: false
  }
});
const downOption = reactive({
  textInOffset: '',
  textOutOffset: '',
  textLoading: '',
  textSuccess: ''
});
const { mescrollInit, downCallback, getMescroll } = useMescroll();

const upCallback = async (mescroll: any) => {
  if (categoryId.value <= 0) {
    return false;
  }
  const payload: any = {
    categoryId: categoryId.value,
    title: keyword.value
  };

  const res = await getHelpList(payload);
  let newList = res.data.list;
  if (!res.data.list) {
    newList = [];
  }
  mescroll.endBySize(newList.length, newList.length);
  if (mescroll.num == 1) {
    list.value = [];
  }
  list.value = list.value.concat(newList);
};

async function getHelpCateList() {
  let cateArr = await getHelpCategory();
  categoryArr.value = cateArr.data.list;
  categoryId.value = parseInt(cateArr.data.list[0].id);
  downCallback();
}

function chooseTab(id: number) {
  categoryId.value = id;
  downCallback();
}

function searchKeyword() {
  downCallback();
}

function gotoCs() {
  if (authStore.isLoggedIn) {
    uni.navigateTo({
      url: '/pages/cs/cs'
    });
  } else {
    uni.navigateTo({
      url: '/pages/auth/login'
    });
  }
}

onMounted(async () => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarH.value = res.statusBarHeight || 0;
    }
  });

  await getHelpCateList();
});
</script>

<template>
  <uni-nav-bar
    v-if="isWechat()"
    :border="false"
    :title="t('LAKey_help')"
    backgroundColor="#269C74"
    color="#FFFFFF"
    fixed
    left-icon="left"
    status-bar
    @click-left="router.back"
  />
  <view :style="{ height: 'calc(100vh - 44px - ' + statusBarH + 'px)' }" class="help-contain">
    <view class="help-contain-top">
      <view class="help-contain-top-tips">
        <text>{{ t('LAKey_helloWelcomeToHelpCenter') }}</text>
        <image src="/static/icon_help_jiao.png" />
      </view>
      <image
        class="help-contain-top-img"
        src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/help_dog.png"
      />
    </view>

    <view
      :style="{ height: 'calc(100vh - 44px - 224rpx - ' + statusBarH + 'px)' }"
      class="help-contain-center"
    >
      <view class="help-contain-center-search">
        <image src="/static/icon_help_search.png" />
        <input
          v-model="keyword"
          :placeholder="t('LAKey_pleaseEnterTheProblemYouAreFacing')"
          confirm-type="search"
          placeholder-class="placeholder"
          type="text"
          @confirm="searchKeyword"
        />
      </view>
      <view class="help-contain-center-tabs">
        <scroll-view scroll-x="true">
          <view class="help-contain-center-tabs-list">
            <view
              v-for="(item, index) in categoryArr"
              :key="index"
              :class="categoryId == item.id ? 'active' : ''"
              class="help-contain-center-tabs-list-item"
              @click="chooseTab(item.id)"
            >
              {{ item.name }}
              <view></view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="help-contain-center-list">
        <mescroll-uni
          ref="mescrollRef"
          :down="downOption"
          :fixed="false"
          :up="upOption"
          @down="downCallback"
          @init="mescrollInit"
          @up="upCallback"
        >
          <view
            v-for="(item, index) in list"
            :key="index"
            class="help-contain-center-list-item"
            @click="
              router.to(RouteMap.helpCenterDetail, {
                id: item.id
              })
            "
          >
            {{ item.title }}
            <image src="/static/icon_account_arrow_right.png" />
          </view>
        </mescroll-uni>
      </view>
      <view class="help-contain-center-bottom">
        {{ t('LAKey_notFoundAnswer') }}
        <text @click="gotoCs">{{ t('LAKey_findOnlineCustomerService') }}</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.help {
  &-contain {
    background: #269c74;

    &-top {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 20rpx;

      &-tips {
        min-width: 372rpx;
        height: 132rpx;
        padding-left: 42rpx;
        border-radius: 132rpx;
        display: flex;
        justify-content: center;
        flex-direction: column;
        background: #fff0dd;
        position: relative;
        font-weight: 500;
        font-size: 32rpx;
        color: #117954;
        line-height: 52rpx;

        image {
          display: block;
          width: 86rpx;
          height: 58rpx;
          position: absolute;
          right: -38rpx;
          bottom: 12rpx;
        }
      }

      &-img {
        margin-left: 44rpx;
        display: block;
        width: 182rpx;
        height: 204rpx;
      }
    }

    &-center {
      background: #ffffff;
      border-radius: 16rpx;
      padding-top: 40rpx;
      position: relative;

      &-search {
        margin: 0 32rpx;
        background: #f4f4f4;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        padding: 0 24rpx;
        height: 80rpx;

        image {
          display: block;
          width: 32rpx;
          height: 32rpx;
        }

        input {
          margin-left: 8rpx;
          font-size: 28rpx;
          line-height: 40rpx;
          height: 40rpx;

          &.placeholder {
            color: #adaeb0;
          }
        }
      }

      &-tabs {
        margin-top: 8rpx;
        padding-top: 30rpx;
        padding-left: 32rpx;
        height: 96rpx;

        &-list {
          white-space: nowrap;

          &-item {
            display: inline-block;
            font-weight: 400;
            font-size: 28rpx;
            color: #707070;
            line-height: 40rpx;
            margin-right: 48rpx;

            view {
              height: 4rpx;
              background: #ffffff;
              margin-top: 4rpx;
            }

            &.active {
              font-weight: 500;
              color: #3d3d3d;

              view {
                background: #269c74;
              }
            }
          }
        }
      }

      &-list {
        position: absolute;
        top: 230rpx;
        bottom: 108rpx;
        bottom: calc(constant(safe-area-inset-bottom) + 108rpx);
        bottom: calc(env(safe-area-inset-bottom) + 108rpx);
        left: 0;
        right: 0;
        padding: 0 32rpx;

        &-item {
          border-bottom: 1px solid #f4f4f4;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 46rpx 0;
          font-size: 28rpx;
          color: #3d3d3d;
          font-weight: 400;
          line-height: 28rpx;

          image {
            display: block;
            width: 20rpx;
            height: 20rpx;
          }

          &:last-child {
            border-bottom: none;
          }
        }
      }

      &-bottom {
        position: fixed;
        left: 0;
        right: 0;
        height: 108rpx;
        border-top: 1px solid #f4f4f4;
        bottom: 0;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
        line-height: 108rpx;
        text-align: center;
        font-weight: 400;
        font-size: 28rpx;
        color: #979797;

        text {
          color: #0075f0;
        }
      }
    }
  }
}
</style>
